<template>
    <div class="flex-1 flex justify-between">
        <!-- 左侧切换按钮 -->
        <div
            class="h-full w-80px flex-center left-wrapper"
            :class="{ 'switch-btn-hidden': model === 'search' }"
        >
            <n-icon-wrapper
                color="#e8e7e6"
                class="cursor-pointer ease duration-200 hidden left-btn"
                :size="48"
                :border-radius="50"
                @click="emits('prev')"
            >
                <n-icon :component="ChevronBack" :size="32" />
            </n-icon-wrapper>
        </div>
        <!-- 会议室列表 -->
        <div class="w-full overflow-scroll">
            <n-grid
                cols="s:2 m:3 l:4 xl:5"
                :x-gap="20"
                :y-gap="20"
                responsive="screen"
                class="p-10px box-border"
            >
                <n-gi
                    v-for="(item, index) in meetingRooms"
                    :key="index"
                    @click="emits('click-item', item)"
                    @contextmenu="(e: MouseEvent) => handleContextMenu(e, item)"
                >
                    <RoomItem
                        :item="item"
                        :is-useing="usingRooms.includes(item.id!)"
                    />
                </n-gi>
            </n-grid>
        </div>
        <!-- 右侧切换按钮 -->
        <div
            class="h-full w-80px flex-center right-wrapper"
            :class="{ 'switch-btn-hidden': model === 'search' }"
        >
            <n-icon-wrapper
                color="#e8e7e6"
                class="cursor-pointer ease duration-200 hidden right-btn"
                :size="48"
                :border-radius="50"
                @click="emits('next')"
            >
                <n-icon :component="ChevronForward" :size="32" />
            </n-icon-wrapper>
        </div>
        <n-dropdown
            placement="bottom-start"
            trigger="manual"
            :x="xPos"
            :y="yPos"
            :options="dropdownOptions"
            :show="showDropdown"
            @clickoutside="showDropdown = false"
            @select="handleSelect"
        />
    </div>
</template>

<script lang="ts" setup>
import { h, ref } from "vue";
import type { Component } from "vue";
import type { MeetingRoom } from "@/service/api/types/room";
import {
    ChevronBack,
    ChevronForward,
    TrashBin,
    Create,
} from "@vicons/ionicons5";

import { NIcon } from "naive-ui";
import RoomItem from "@/components/room-item/index.vue";

defineProps<{
    model: "list" | "search";
    usingRooms: string[];
    meetingRooms: MeetingRoom[];
}>();

const emits = defineEmits<{
    (e: "prev"): void;
    (e: "next"): void;
    (e: "click-item", item: MeetingRoom): void;
    (e: "rclick-update"): void;
    (e: "rclick-delete"): void;
}>();

const xPos = ref(0);
const yPos = ref(0);
const showDropdown = ref(false);

const renderIcon = (icon: Component) => {
    return () => {
        return h(
            NIcon,
            { size: 20 },
            {
                default: () => h(icon),
            }
        );
    };
};

const dropdownOptions = [
    { label: "编辑", key: "edit", icon: renderIcon(Create) },
    { label: "删除", key: "delete", icon: renderIcon(TrashBin) },
];

const handleContextMenu = (e: MouseEvent, item: MeetingRoom) => {
    e.preventDefault();
    xPos.value = e.clientX;
    yPos.value = e.clientY;
    showDropdown.value = true;
    emits("click-item", item);
};

const handleSelect = (key: string) => {
    showDropdown.value = false;
    if (key === "edit") {
        emits("rclick-update");
    } else if (key === "delete") {
        emits("rclick-delete");
    }
};
</script>

<style scoped>
.left-wrapper:hover .left-btn {
    display: flex;
}

.right-wrapper:hover .right-btn {
    display: flex;
}

.switch-btn-hidden {
    opacity: 0;
    pointer-events: none;
}
</style>
